<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>React State</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

</head>

<body>

    <div id="example"></div>

    <script type="text/babel">
        class Demo extends React.Component {
            state={isHot: true}

            showInput1 = () => {
                console.log("refs ", this);
                alert(this.refs.input1.value);
            }

            showInput11 = () => {
                alert(this.refs.input11.value);
            }

            showInput2 = () => {
                alert(this.input2.value);
            }

            refInput21 = (element) => {
                console.log("current21 ", element); 
                this.input21=element;
            }

            showInput21 = () => {
                alert(this.input21.value);
            }

            // 这种方式其实挺繁琐的，每次都要create一个，调用的时候还要current
            input3 = React.createRef();
            input31 = React.createRef();

            showInput3 = () => {
                console.log("this.input3 ", this.input3);
                alert(this.input3.current.value);
            }

            showInput31 = () => {
                alert(this.input31.current.value);
            }

            changeValue = (e) => {
                const selectValue = e.target.value;
                this.setState({selectValue})
            }

            render() {
                console.log("我又走了一遍哦 ~");

                return (<div>
                    据说refs才是解决此问题的王道，解决明了，效率还高
                    <p>
                        方法一：字符串类型refs <br/>
                        <input ref="input1" />
                        <button onClick={this.showInput1}>点我弹出输入框值</button>
                        &nbsp;&nbsp;
                        <input ref="input11" />
                        <button onClick={this.showInput11}>点我弹出输入框值</button>
                    </p>

                    <p>
                        方法二：回调函数 <br/>
                        天气: {this.state.isHot?"热":"凉爽"} &nbsp;
                        <button onClick={()=>{this.setState({isHot: !this.state.isHot})}}>改变state, render again</button> <br/>

                        内联函数：据说每次更新时会调用两次：react为了渲染不出错，第一次会清空ref; 也就是1+N*2; 但是效率无关紧要；<br/>
                        当然，这不是内敛函数的锅，如果 onClick= ()=> console.log(xxx) , 不点击，每次render也是是不会回调的，是关键词ref&内敛共同导致的<br/>
                        <input ref={element => {console.log("current2 ", element); this.input2=element;}} />
                        <button onClick={this.showInput2}>点我弹出输入框值</button> <br/>
                        绑定成类的函数，则refInput21还是执行一次<br/>
                        <input ref={this.refInput21} />
                        <button onClick={this.showInput21}>点我弹出输入框值</button>
                    </p>

                    <p>
                        方法三：通过React.createRef();  <br/>
                        第一种方法又效率问题，第二种也没啥毛病呢，为啥还要整出第三种呢？还官方推荐的,<br />
                        <input ref={this.input3} />
                        <button onClick={this.showInput3}>点我弹出输入框值</button>
                        &nbsp;
                        <input ref={this.input31} />
                        <button onClick={this.showInput31}>点我弹出输入框值</button>
                    </p>

                </div>)
            };
        }

        ReactDOM.render(<Demo />, document.getElementById('example'));

    </script>

</body>

</html>